@import "@/styles/variables.less";

.badge {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 75%;
  line-height: 1;
  color: #fff;
  text-align: center;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: #ff00007d;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
  // margin-bottom: @size-sm;
  padding: @size-lg;
  &:first-child {
    font-size: 42px;
    font-weight: bold;
  }
}

.sub {
  font-size: @size-xs;
  line-height: @size-xs;
  height: @size-xs;
  color: #68a1e3;
  padding: 4px 8px;
  margin-left: 18px;
  background-color: #ebf4ff;
  border: 1px solid #8cbaef;
  white-space: nowrap;
  &:first-child{
    margin-left: 0;
  }
}
.box-button {
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 14px;
  text-align: center;
  background-color: @light-primary-bg;
  font-size: @size-sm;
  color: @primary-color;
  margin-right: @size-2xs;
  box-shadow: @light-shadow;
  &:last-child {
    margin-right: 0;
  }
}

.light-txt {
  color: @default-color;
  font-size: @size-xs;
}

.primary {
  color: @primary-color;
}
.disabled {
  color: @default-color;
}
.flex {
  display: flex;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}
.flex-align {
  display: flex;
  align-items: center;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.empty-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: @light-primary-color;
  background-color: #f0f8ff1f;
}
.form-card {
  margin-bottom: @size-lg;
  border-radius: @small-radius;
  overflow: hidden;
  box-shadow: @light-shadow;
  .form-item-base {
    padding: 0 @size-base @size-sm @size-base;
    background: white;
  }
  .form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: @size-sm @size-base;
    background: white;
    transition: all @transition-duration;
    .label {
      font-size: @size-base;
      color: @text-color;
      .help {
        margin-left: @size-xs;
        color: @default-color;
      }
    }
  }
}

Textarea {
  width: auto;
  border: @light-border;
  border-radius: 2px;
  padding: 6px;
}

.dynamic-svg-icon {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.heading {
  display: flex;
  margin-top: @size-lg;
  margin-bottom: 20px;
  &:first-child {
    margin-top: 0;
  }
  .h2 {
    font-size: @size-lg;
    font-weight: bold;
  }
  .dynamic-svg-icon {
    margin-right: 6px;
  }
}

.primary-button {
  background-color: @primary-color;
  color: white;
  margin-top: @size-base;
}

.size-small {
  font-size: @size-sm;
}

.nowrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.global-picker-header {
  margin: @size-base;
  display: flex;
  justify-content: space-between;
  .confirm {
    color: @primary-color;
  }
  .cancel {
    color: @default-color;
  }
}
